@property --count {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@keyframes percent {
    from { --count: 0; }
    to { --count: var(--num); }
}

@keyframes progress {
    from { width: 0%; }
    to { width: var(--progress); }
}




.b_AnimatedStats{

    /* --section_padding_block: 0 100px; */

    .intro{
        text-align:center;
        margin-bottom: 60px;
        display: grid;
        gap:24px;
    }
    @media (width >= 600px){
        .intro{
            margin-bottom: 80px;
        }
    }
    .main_number{
        font-size:44px;
        line-height: 52px;
        font-weight:600;
        font-family: 'museo-slab-rounded';
        color:var(--text_color);
        position: relative;
    }
    @media (width >= 600px){
        .main_number{
            font-size:72px;
            line-height: 80px;
        }
    }




    .progress{
        display: grid;
        gap:50px;
    }



    .line{
        display: grid;
        gap: 10px;
    }
    .line .title{
        display: flex;
        justify-content: space-between;
    }



    /* Percent Number */
    .percent{
        position: relative;
        counter-reset: num var(--count);
    }
    .percent:before{
        content: counter(num);
    }

    /* When block is in view */
    &.animated .percent{
        animation: 1s ease-in forwards percent;
    }



    /* Progress Bar */
    .line .progress_bar{
        width: 100%;
        height: 40px;
        background: var(--bg_color);
        position: relative;
    }
    .line .progress_bar:after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height:40px;
        background-color: var(--accent_color);
    }
    /* When block is in view */
    &.animated .line .progress_bar:after{
        animation: 1s ease-in forwards progress;
    }




    /* Names and Numbers */
    .details{
        display: grid;
        gap:50px;
    }
    .details .stat{
        display: grid;
        /* gap:15px; */
    }
    .details h4{
        line-height:1;
    }




    /* Grid */
    .grid_offset{
        display:grid;
        gap:50px;
    }
    @media (width >= 600px){
        .grid_offset{
            grid-template-columns: 2fr 1fr;
        }
    }
}